import React, { Component } from 'react'
import { Layout, Button, notification, Menu } from 'antd';
import {
  AppstoreOutlined,
  MailOutlined,
} from '@ant-design/icons';

import './index.css'
import logo from '../../assets/logo.jpg'
import { BrowserRouter, Link, Redirect, Route, Switch } from 'react-router-dom';

import UserList from '../usersManage/usersList'
import RightList from '../rightsManage/rightList'
import RoleList from '../rightsManage/roleList'
import GoodsList from '../goodsManage/goodsList'
import GoodsCategory from '../goodsManage/goodsCategory'
import GoodsParameter from '../goodsManage/goodsParameters'
import OrderList from '../ordersManage/ordersList'
import ReportData from '../dataAnalysis/report'
import AddGood from '../goodsManage/addGood'
const { Header, Sider, Content } = Layout;
const {SubMenu} = Menu
export default class Admin extends Component {

  logout = ()=>{
    sessionStorage.clear();
    this.props.history.replace('/login')
    notification.info({
      message:'已退出'
    })
  }

  selectItem = ( {item, key, keyPath, domEvent} ) => {
    console.log(item,key,keyPath,domEvent)
    this.props.history.push(key)
  }

  render() {
    return (
      <Layout className='admin-container'>
        <Header className='admin-header'>
          <img src={logo} className='admin-header-logo' alt='logo'></img>
          <div className='admin-header-title'>后台管理系统-React</div>
          <Button type='text' className='admin-header-logout' onClick={this.logout}>退出</Button>
        </Header>
        <BrowserRouter>
        <Layout className='admin-main'>
          <Sider className='admin-menu-container'>
            <Menu
              mode='inline'
              theme='dark'
            >
              <SubMenu key="sub-1" icon={<MailOutlined />} title="用户管理">
                <Menu.Item key='1'>
                  <Link to='/admin/user-list'>用户列表</Link>
                </Menu.Item> 
              </SubMenu>
              <SubMenu key="sub-2" icon={<AppstoreOutlined />} title="权限管理">
                <Menu.Item key='2'>
                  <Link to='/admin/right-list'>权限列表</Link>
                </Menu.Item>
                <Menu.Item key='8'>
                  <Link to='/admin/role-list'>角色列表</Link>
                </Menu.Item>
              </SubMenu>
              <SubMenu key="sub-3" icon={<MailOutlined />} title="商品管理">
                <Menu.Item key='3'>
                  <Link to='/admin/good-list'>商品列表</Link>
                </Menu.Item>     
                <Menu.Item key='4'>
                  <Link to='/admin/category-list'>分类列表</Link>
                </Menu.Item>
                <Menu.Item key='5'>
                  <Link to='/admin/good-parameters'>商品参数</Link>
                </Menu.Item>
              </SubMenu>
              <SubMenu key="sub-4" icon={<AppstoreOutlined />} title="订单管理">
                <Menu.Item key='6'>
                  <Link to='/admin/order-list'>订单列表</Link>
                </Menu.Item>
              </SubMenu>
              <SubMenu key="sub-5" icon={<AppstoreOutlined />} title="数据统计">      
                <Menu.Item key='7'>
                    <Link to='/admin/report'>统计报表</Link>
                </Menu.Item>
              </SubMenu>
            </Menu>
          </Sider>
          <Content className='admin-main-container'>
              <Switch>
                <Route path='/admin/user-list' component={UserList}/>
                <Route path='/admin/right-list' component={RightList}/>
                <Route path='/admin/role-list' component={RoleList}/>
                <Route path='/admin/good-list' component={GoodsList}/>
                <Route path='/admin/category-list' component={GoodsCategory}/>
                <Route path='/admin/good-parameters' component={GoodsParameter}/>
                <Route path='/admin/order-list' component={OrderList}/>
                <Route path='/admin/report' component={ReportData}/>
                <Route path='/admin/addGood' component={AddGood}/>
                <Redirect to='/admin/user-list'/>
              </Switch>
          </Content>
        </Layout>
        </BrowserRouter>
      </Layout>
    )
  }
}
